<template>
<van-dropdown-menu>
  <div class="filter-block">
        <dl class="retrie">
        <dt>
            <div><a id="caipu_level" href="javascript:;">难度</a></div>
            <div><a id="caipu_doing" href="javascript:;">做法&nbsp;&nbsp;</a></div>
            <div><a id="caipu_kouwei" href="javascript:;">口味&nbsp;&nbsp;</a></div>
            <div><a id="caipu_time" href="javascript:;">时间&nbsp;&nbsp;</a></div>
            <div><a id="caipu_pop" href="javascript:;">人数&nbsp;&nbsp;</a></div>
        </dt>
        <dd class="caipu_level">
            <ul class="slide downlist">
                                    <li><a href="#" data="nd">简单</a></li>
                                    <li><a href="#" data="nd">无</a></li>
                                    <li><a href="#" data="nd">普通</a></li>
                            </ul>
        </dd>
        <dd class="caipu_doing">
            <ul class="slide downlist">
                                    <li><a href="#" data="zf">炒</a></li>
                                    <li><a href="#" data="zf">无</a></li>
                                    <li><a href="#" data="zf">炖</a></li>
                                    <li><a href="#" data="zf">煎</a></li>
                                    <li><a href="#" data="zf">煮</a></li>
                                    <li><a href="#" data="zf">拌</a></li>
                            </ul>
        </dd>
        <dd class="caipu_kouwei">
            <ul class="slide downlist">
                                    <li><a href="#" data="kw">咸鲜</a></li>
                                    <li><a href="#" data="kw">无</a></li>
                                    <li><a href="#" data="kw">蒜香</a></li>
                                    <li><a href="#" data="kw">其它</a></li>
                                    <li><a href="#" data="kw">咸甜</a></li>
                                    <li><a href="#" data="kw">原味</a></li>
                            </ul>
        </dd>
        <dd class="caipu_time">
            <ul class="slide downlist">
                                    <li><a href="#" data="sj">&lt;30分钟</a></li>
                                    <li><a href="#" data="sj">无</a></li>
                                    <li><a href="#" data="sj">&lt;10分钟</a></li>
                                    <li><a href="#" data="sj">&lt;15分钟</a></li>
                            </ul>
        </dd>
        <dd class="caipu_pop">
            <ul class="slide downlist">
                                    <li><a href="#" data="rs">1-2人</a></li>
                                    <li><a href="#" data="rs">无</a></li>
                            </ul>
        </dd>
    </dl>
</div>
</van-dropdown-menu>
</template>
<script type="text/javascript">
   
    $(function(){
        
        $('.retrie dt a').click(function(e){
            e.preventDefault();
            var $t=$(this);
            if($t.hasClass('up')){
                $(".retrie dt a").removeClass('up');
                $('.downlist').hide();
                $('.mask').hide();
            }else{
                $(".retrie dt a").removeClass('up');
                $('.downlist').hide();
                $t.addClass('up');
                $('.downlist').eq($(".retrie dt a").index($(this)[0])).show();
                $('.mask').show();
            }
        });
                
    });
</script>
<style scoped>

ul li{
  list-style:none;
  margin: 0px;
  padding: 0px;
}
dd, dl, dt{
  padding: 0px;
  margin: 0px;
}
dt {
    font-weight: 700;
}
dd, dt {
    line-height: 1.42857143;
}

.retrie {
    position: relative;
    z-index: 102;
    height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #e8e8e8;
    border-top:#ff7d2f .2vw solid;
}
.retrie dt {     display: -webkit-box; overflow: hidden }
.retrie dt div{
    color: #ff3300;
    background-color: #f7f5f3;
    -webkit-box-flex: 1;
}
.retrie dt a {
    color: #333;
    font-size: 16px;
    text-align: center;
    height: 49px;
    line-height: 50px;
    position: relative;
    display: block;
}
.retrie dt a:after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -2px;
    margin-left: 20px;
    width: 1.7vw;
    height: 1.7vw;
    border: #666 solid;
    border-width: 1px 1px 0 0;
    content: ' ';
    -webkit-transform: rotate(135deg);
}

.retrie dt a:last-child:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 1px;
    height: 100%;
    background-color: #ebebeb;
    content: ' ';
}
.retrie dd { position: relative; }
/* ===== slide-area ===== */
a {
    color: #333;
    text-decoration: none;
    font-size: 13px;
    }
.slide {
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 104;
    display: none;
    width: 100%;
    overflow-y: auto;
    background-color: #fff;
}
.slide li {
    width:25%;
    height: 50px;
    border-bottom: 1px solid #eee;
    float: left;
}
.slide li a {
    text-align: center;
    display: block;
    height: 50px;
    background-color: transparent;
    line-height: 50px;
}
.slide li a:hover,
.slide li a.selected { background-color: #f6f6f6; }

.slide li a.select { background-color: #fff; }
.slide.downlist{
    border-bottom: #ccc 1px solid;
}
</style>



